<template>
    <div class="app-container">
      <el-card class="search-card">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="90px"
        >
          <el-form-item label="订单号" prop="orderNumber">
            <el-input
              v-model="queryParams.orderNumber"
              placeholder="请输入订单号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="操作类型" prop="operationType">
            <el-select
              v-model="queryParams.operationType"
              placeholder="请选择操作类型"
              clearable
            >
              <el-option
                v-for="dict in dict.type.operation_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select
              v-model="queryParams.paymentMethod"
              placeholder="请选择支付方式"
              clearable
            >
              <el-option
                v-for="dict in dict.type.payment_method"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="支付类型" prop="onlineType">
            <el-select
              v-model="queryParams.onlineType"
              placeholder="请选择支付类型"
              clearable
            >
              <el-option label="离线支付" value="0" />
              <el-option label="在线支付" value="1" />
              <el-option label="现金充值" value="2" />
              <el-option label="在线退款" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
              <el-option
                v-for="dict in dict.type.order_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="支付时间" prop="time">
            <el-date-picker
              v-model="queryParams.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="table-card">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['order:flow:export']"
              >导出</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="flowList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="订单号" align="center" prop="orderNumber" width="320" />
          <el-table-column label="金额" align="center" prop="operationAmount">
            <template slot-scope="scope">
              {{ scope.row.operationAmount ? scope.row.operationAmount : "0" }}元
            </template>
          </el-table-column>
          <el-table-column label="手续费" align="center" prop="handlingFee">
            <template slot-scope="scope">
              {{ scope.row.handlingFee ? scope.row.handlingFee : "0" }}元
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="name" />
          <el-table-column
            label="身份证号"
            align="center"
            prop="idCardNumber"
            width="180"
          />
          <el-table-column label="余额" align="center" prop="postOperationBalance">
            <template slot-scope="scope">
              {{ scope.row.postOperationBalance ? scope.row.postOperationBalance : "0" }}元
            </template>
          </el-table-column>
          <el-table-column label="操作类型" align="center" prop="operationType">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.operation_type"
                :value="scope.row.operationType"
              />
            </template>
          </el-table-column>
          <el-table-column label="支付方式" align="center" prop="paymentMethod">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.payment_method"
                :value="scope.row.paymentMethod"
              />
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.order_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="支付类型" align="center" prop="onlineType">
            <template slot-scope="scope">
              <span v-if="scope.row.onlineType == '1'">在线支付</span>
              <span v-if="scope.row.onlineType == '0'">离线支付</span>
              <span v-if="scope.row.onlineType == '2'">现金充值</span>
              <span v-if="scope.row.onlineType == '3'">在线退款</span>
            </template>
          </el-table-column>
          <el-table-column label="支付时间" align="center" prop="createdAt" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createdAt, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
    </div>
  </template>

  <script>
  import { refundListFun } from "@/api/order/flow";

  export default {
    name: "batchRefund",
    dicts: ["order_status", "operation_type", "payment_method"],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 交易流水表格数据
        flowList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: null,
          idCardNumber: null,
          orderNumber: null,
          platformOrderNumber: null,
          channelOrderNumber: null,
          operationType: null,
          paymentMethod: null,
          status: null,
          operator: null,
          createdAt: null,
          time: [],
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询交易流水列表 */
      getList() {
        this.loading = true;
        if (this.queryParams.time.length == 2) {
          this.queryParams.paymentTimeStart = this.queryParams.time[0];
          this.queryParams.paymentTimeEnd = this.queryParams.time[1];
        }
        refundListFun(this.queryParams).then((response) => {
          this.flowList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          idCardNumber: null,
          personId: null,
          orderNumber: null,
          platformOrderNumber: null,
          channelOrderNumber: null,
          operationAmount: null,
          handlingFee: null,
          postOperationBalance: null,
          operationType: null,
          paymentMethod: null,
          status: null,
          operator: null,
          operationTime: null,
          createdAt: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "order/flow/export",
          {
            ...this.queryParams,
          },
          "交易流水" + `_${new Date().getTime()}.xlsx`
        );
      },
    },
  };
  </script>
